<script setup lang="ts">
import emitter from "@/utils/mitt.ts";
import SvgIcon from '@/components/SvgIcon/Svglcon.vue'

import { RouterView } from "vue-router";
import { useRouter } from "vue-router";
import { onMounted } from "vue";
import useCurrentInstance from "@/hooks/useCurrentInstance";
const router = useRouter();
const { globalProperties } = useCurrentInstance();
console.log(globalProperties);
function toHome() {
  // 发布事件
  emitter.emit("search-change", "八百呢");
  router.push("/");
}
onMounted(() => {
  // 订阅事件
  emitter.on("search-change", (obj: string) => {
    console.log(obj + "好的");
  });
});
function toAbout() {
  router.push("/about");
}
</script>

<template>
  <div class="box">
  <SvgIcon name="phooe"  color="red"/>

    <span @click="toHome">主页</span><span @click="toAbout">展示</span>
  </div>
  <RouterView></RouterView>
</template>

<style scoped lang="scss">
.box {
  display: flex;
  justify-content: space-evenly;
  color: $color-red;
}
.siez{
  width: 50px;
  height: 50px;
}
</style>
